﻿@model IList<CategoryModel>

@using Nop.Web.Models.Catalog;
@if (Model.Count > 0)
{
    var cat_i = 0;
    <div class="recommended_items"><!--recommended_items-->
        <h2 class="title text-center">Featured Categories</h2>
						
        <div id="recommended-item-carousel" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                @foreach (var item in Model)
                {
                    if(cat_i%4==0)
                    {
                        if(cat_i==0)
                        {
                            @:<div class="item active">    
                        }else
                        {
                            @:<div class="item">
                        }
                        

                            

                    }
                    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
                        <div class="product-image-wrapper">
                            <div class="single-products">
                                <div class="productinfo text-center">
                                    <img alt="@item.PictureModel.AlternateText" src="@item.PictureModel.ImageUrl"
                                         title="@item.PictureModel.Title" />
                                    
                                    <p><a href="@Url.RouteUrl("Category", new { SeName = item.SeName })" title="@item.PictureModel.Title">
                                           @item.Name</a></p>
                                    
                                </div>
												
                            </div>
                        </div>
                    </div>
                    if(cat_i%4==3)
                    {
                       @:</div> 
                    }
                    cat_i++;
                }
                @if(cat_i%4!=0)
                    {
                       @:</div> 
                    }
                
            </div>
            <a class="left recommended-item-control" href="#recommended-item-carousel" data-slide="prev">
                <i class="fa fa-angle-left"></i>
            </a>
            <a class="right recommended-item-control" href="#recommended-item-carousel" data-slide="next">
                <i class="fa fa-angle-right"></i>
            </a>			
        </div>
    </div>


   


}






